<template>
  <view>
    <view v-for="(item, index) in contactInfoList" :key="index">
      <u-cell-group>
        <u-cell>
          <view slot="title" class="flex justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-150 c-99"> 联系人: </view>
                <view class="flex-1">
                  <u--input v-model="item.linkman" placeholder="请输入内容" border="none"></u--input>
                </view>
              </view>
              <view class="flex-1  flex-sb p-l-20" @click="selectedSex(index)">
                <view class="w-100 c-99"> 性别: </view>
                <text class="w-100">{{ item.sexName }}</text>
              </view>
            </view>
          </view>
          <clIcon @click="delectItem(index)" slot="right-icon" type="icon-shanchu" color="#000" size="25"></clIcon>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-100 c-99"> 职位: </view>
                <view class="flex-1">
                  <u--input v-model="item.position" placeholder="请输入内容" border="none"></u--input>
                </view>
              </view>

              <view class="flex-1 flex-sb p-l-20">
                <view class="w-100 c-99"> 手机: </view>
                <view class="flex-1">
                  <u--input v-model="item.phone" placeholder="请输入内容" border="none"></u--input>
                </view>
              </view>
            </view>
          </view>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-100 c-99"> 电话: </view>
                <u--input v-model="item.tel" placeholder="请输入内容" border="none"></u--input>
              </view>

              <view class="flex-1 flex-sb p-l-20">
                <view class="w-100 c-99"> 传真: </view>
                <u--input v-model="item.fax" placeholder="请输入内容" border="none"></u--input>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right" @click="selectedCalendar(index)">
          <view slot="title" class="flex">
            <view class="w-100 c-99"> 时间: </view>
            <view class="flex-1 W-100">
              {{ item.birthday }}
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-100 c-99"> 地区: </view>
            <view class="flex-1">
              <u--input v-model="item.addressFull" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-200 c-99"> 详情地址: </view>
            <view class="flex-1">
              <u--input v-model="item.address" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-150 c-99"> 默认签署: </view>
            <view class="flex-1">
              <u-switch v-model="item.isDefault"></u-switch>
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-150 c-99"> 备注: </view>
            <view class="flex-1">
              <u--input v-model="item.remarks" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>
      </u-cell-group>
      <u-gap height="10" bgColor="#eee"></u-gap>
    </view>
    <view class="flex content btn-view">
      <view class="btn flex" @click="addItem">
        <u-icon name="plus" size="10"></u-icon>
        <text class="p-l-20">添加联系人</text>
      </view>
      <view class="btn flex">
        <u-icon name="camera-fill" size="10"></u-icon>
        <text class="p-l-20">识别名片</text>
      </view>
    </view>
    <cxSex :show="sexShows" @sexConfirm="sexConfirm"></cxSex>
    <u-calendar :show="calendarShow" :mode="calendarMode" @confirm="calendarConfirm"></u-calendar>
  </view>
</template>
<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import cxSex from "@/components/cx-sex/cx-sex.vue";
import { getVoDataById } from "@/apis/bill/information/supplier";
export default {
  components: {
    clIcon,
    cxSex
  },
  data() {
    return {
      sexShows: false,
      calendarShow: false,
      calendarMode: "single",
      contactInfoList: [],
      selectedSexIndex: 0
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  watch: {
    data(n, o) {
      this.contactInfoList = n.contactInfoList
      if(!this.contactInfoList ||  this.contactInfoList == null){
        this.contactInfoList = []
      }
    }
  },
  methods: {
    getDataItem(id) {
      getVoDataById(id).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.contactInfoList = data.contactInfoList
      });
    },
    calendarConfirm(e) {
      this.contactInfoList[this.selectedSexIndex].birthday = e[0]
      this.calendarShow = false;
    },
    selectedCalendar(index) {
      this.selectedSexIndex = index
      this.calendarShow = true
    },
    selectedSex(index) {
      this.selectedSexIndex = index
      this.sexShows = true
    },
    sexConfirm(e) {
      if (e) {
        this.contactInfoList[this.selectedSexIndex].sexName = e.label
        this.contactInfoList[this.selectedSexIndex].sex = e.value
      }
      this.sexShows = false
    },
    addItem() {
      this.contactInfoList.push({})
    },
    delectItem(index) {
      this.contactInfoList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-view {
  justify-content: space-around;
  padding-left: 30rpx;
  margin: 24rpx 0;

  .btn {
    border: 1rpx dashed #999;
    padding: 14rpx 40rpx;
    border-radius: 8rpx;
  }
}
</style>
